<template>
  <view class="main">
    <!-- 第一个子组件：信息展示 -->
    <view class="info-container" style="height: 30%">
      <view style="position: absolute; color: #fff; font-size: 15px" class="info">
        <view>
          {{ t('main.lubricatingOil') }} :
          <span>
            {{
              isEmptyToCharacter(
                rightOrLeftdata(
                  allData?.left_main?.z133.currentValue,
                  allData?.right_main?.z233.currentValue
                )
              )
            }}
            ℃
          </span>
          <span style="margin: 0 20px"></span>
          <span>
            {{
              isEmptyToCharacter(
                rightOrLeftdata(
                  allData?.left_main?.z117.currentValue,
                  allData?.right_main?.z217.currentValue
                )
              )
            }}
            bar
          </span>
        </view>
        <view>
          {{ t('main.coolingWater') }} :
          <span>
            {{
              isEmptyToCharacter(
                rightOrLeftdata(
                  allData?.left_main?.z134.currentValue,
                  allData?.right_main?.z234.currentValue
                )
              )
            }}
            ℃
          </span>
          <span style="margin: 0 20px"></span>
          <span>
            {{
              isEmptyToCharacter(
                rightOrLeftdata(
                  allData?.left_main?.z118.currentValue,
                  allData?.right_main?.z218.currentValue
                )
              )
            }}
            bar
          </span>
        </view>
        <view>
          {{ t('main.dieselConsumptionRate') }} :
          <span>
            {{
              isEmptyToCharacter(
                rightOrLeftdata(
                  allData?.left_main?.z111.currentValue,
                  allData?.right_main?.z211.currentValue
                )
              )
            }}
            L/hour
          </span>
        </view>
        <view>
          {{ t('main.gasConsumptionRate') }} :
          <span>
            {{
              isEmptyToCharacter(
                rightOrLeftdata(
                  allData?.left_main?.z114.currentValue,
                  allData?.right_main?.z214.currentValue
                )
              )
            }}
            L/hour
          </span>
        </view>
        <view>{{ t('main.operationMode') }}</view>
      </view>
    </view>
    <!-- 第二个子组件：仪表盘 -->
    <view class="gauge-container" style="height: 25%">
    
      <Gauge
        :value="
          Number(rightOrLeftdata(
            allData?.left_main?.z103.currentValue,
            allData?.right_main?.z203.currentValue
          ))
        "
        :min="0"
        :max="60000"
        :text="t('main.superchargerSpeed')"
		style="width: 100%; height: 100%;"
      />
      <Gauge
        :value="
          Number(rightOrLeftdata(
            allData?.left_main?.z101.currentValue,
            allData?.right_main?.z201.currentValue
          ))
        "
        :min="0"
        :max="1000"
        :text="t('main.hostSpeed')"
		style="width: 100%; height: 100%;"
      />
	  <Gauge
	    :value="
	      Number(rightOrLeftdata(
	        HEXtoDEC(allData?.left_main?.z102.currentValue),
	        HEXtoDEC(allData?.right_main?.z202.currentValue)
	      ))
	    "
	    :min="-300"
	    :max="300"
	    :text="t('main.tailshaftSpeed')"
	  		style="width: 100%; height: 100%;"
	  />
    </view>
    <!-- 第三个子组件：发动机背景及相关元素 -->
	<view  class="enginebj" style="height: 45%">
    <view class="wrap" >
        <view class="wrap-box">
          <view class="chimney-mask"></view>
          <view class="chimney-box">
            <view class="chimney">
              <view
                :class="{
                  smoke: true,
                  paused: !(hostRunningStatus(1) || hostRunningStatus(0))
                }"></view>
              <view
                :class="{
                  smoke: true,
                  big: true,
                  paused: !(hostRunningStatus(1) || hostRunningStatus(0))
                }"></view>
            </view>
          </view>
          <view class="propeller-mask"></view>
   <!--       <view class="propeller-box">
            <view class="propeller">
              <view
                :class="{
                  'paddle-left': true,
                  paused: !(hostRunningStatus(1) || hostRunningStatus(0))
                }"></view>
              <view class="paddle-shaft"></view>
              <view
                :class="{
                  'paddle-right': true,
                  paused: !(hostRunningStatus(1) || hostRunningStatus(0))
                }"></view>
            </view>
          </view> -->
 
          <!-- <CardData title="11" ></CardData> -->
          <!-- 排气温度 -->
          <CardBoxPointLayout top="72%" left="60%" :gutterX="22" :column="true"  >
            <template #default="{ gutterX }">
              <CardBoxPoint
                :judg-ment="true"
                :position="false"
                :gutterX="gutterX"
                :color-id="
                  rightOrLeftdata(
                    allData?.left_main?.z149?.state,
                    allData?.right_main?.ygpqwd1?.state
                  )
                "
                :width="10"
                :height="10"></CardBoxPoint>
              <CardBoxPoint
                :judg-ment="true"
                :position="false"
                :color-id="
                  rightOrLeftdata(allData?.left_main?.z150?.state, allData?.right_main?.z250?.state)
                "
                :gutterX="gutterX"
                :width="10"
                :height="10"></CardBoxPoint>
              <CardBoxPoint
                :judg-ment="true"
                :color-id="
                  rightOrLeftdata(allData?.left_main?.z151?.state, allData?.right_main?.z251?.state)
                "
                :position="false"
                :gutterX="gutterX"
                :width="10"
                :height="10"></CardBoxPoint>
              <CardBoxPoint
                :judg-ment="true"
                :color-id="
                  rightOrLeftdata(allData?.left_main?.z152?.state, allData?.right_main?.z252?.state)
                "
                :position="false"
                :gutterX="gutterX"
                :width="10"
                :height="10"></CardBoxPoint>
              <CardBoxPoint
                :judg-ment="true"
                :color-id="
                  rightOrLeftdata(allData?.left_main?.z153?.state, allData?.right_main?.z253?.state)
                "
                :position="false"
                :gutterX="gutterX"
                :width="10"
                :height="10"></CardBoxPoint>
              <CardBoxPoint
                :judg-ment="true"
                :color-id="
                  rightOrLeftdata(allData?.left_main?.z154?.state, allData?.right_main?.z254?.state)
                "
                :position="false"
                :gutterX="gutterX"
                :width="10"
                :height="10"></CardBoxPoint>
            </template>
          </CardBoxPointLayout>

          <!-- 轴承温度 -->
          <CardBoxPointLayout top="58.7%" left="60.5%" :gutterX="20" :column="true" >
            <template #default="{ gutterX }" >
              <CardBoxPoint
                :judg-ment="true"
                :color-id="
                  rightOrLeftdata(allData?.left_main?.z141?.state, allData?.right_main?.z241?.state)
                "
                :position="false"
                :gutterX="gutterX"
                :width="10"
                :height="10"></CardBoxPoint>
              <CardBoxPoint
                :judg-ment="true"
                :color-id="
                  rightOrLeftdata(allData?.left_main?.z142?.state, allData?.right_main?.z142?.state)
                "
                :position="false"
                :gutterX="gutterX"
                :width="10"
                :height="10"></CardBoxPoint>
              <CardBoxPoint
                :judg-ment="true"
                :color-id="
                  rightOrLeftdata(allData?.left_main?.z143?.state, allData?.right_main?.z143?.state)
                "
                :position="false"
                :gutterX="gutterX"
                :width="10"
                :height="10"></CardBoxPoint>
              <CardBoxPoint
                :judg-ment="true"
                :color-id="
                  rightOrLeftdata(allData?.left_main?.z144?.state, allData?.right_main?.z144?.state)
                "
                :position="false"
                :gutterX="gutterX"
                :width="10"
                :height="10"></CardBoxPoint>
              <CardBoxPoint
                :judg-ment="true"
                :color-id="
                  rightOrLeftdata(allData?.left_main?.z145?.state, allData?.right_main?.z245?.state)
                "
                :position="false"
                :gutterX="gutterX"
                :width="10"
                :height="10"></CardBoxPoint>
              <CardBoxPoint
                :judg-ment="true"
                :color-id="
                  rightOrLeftdata(allData?.left_main?.z146?.state, allData?.right_main?.z246?.state)
                "
                :position="false"
                :gutterX="gutterX"
                :width="10"
                :height="10"></CardBoxPoint>
              <CardBoxPoint
                :judg-ment="true"
                :color-id="
                  rightOrLeftdata(allData?.left_main?.z147?.state, allData?.right_main?.z247?.state)
                "
                :position="false"
                :gutterX="gutterX"
                :width="10"
                :height="10"></CardBoxPoint>
            </template>
          </CardBoxPointLayout>

          <!-- 正倒 -->
          <!-- <CardBoxPoint
        :judg-ment="true"
        text="正"
        :text-style="{ marginRight: '5px', fontSize: '32px', color: '#fff' }"
        :color-id="hostRunningStatus(1)"
        :top="490"
        :left="847"
        :width="40"
        :height="40"
      ></CardBoxPoint>
      <CardBoxPoint
        :judg-ment="true"
        text="倒"
        :text-style="{ marginRight: '5px', fontSize: '32px', color: '#fff' }"
        :color-id="hostRunningStatus(0)"
        :top="540"
        :left="847"
        :width="40"
        :height="40"
      ></CardBoxPoint> -->
         <view class="round">
            <view
              :class="['circle']"
              :style="{
                background: colors[hostRunningStatus(1) || hostRunningStatus(0)]
              }"></view>
            <view
              :class="{
                circle_bottom: true,
                animation: hostRunningStatus(1) || hostRunningStatus(0)
              }"
              :style="{
                background: colors[hostRunningStatus(1) || hostRunningStatus(0)],
                display: hostRunningStatus(1) || hostRunningStatus(0)
              }"></view>
       
            <view
              :class="{
                circle_bottom2: true,
                animation2: hostRunningStatus(1) || hostRunningStatus(0)
              }"
              :style="{
                background: colors[hostRunningStatus(1) || hostRunningStatus(0)],
                display: hostRunningStatus(1) || hostRunningStatus(0) ? 'block' : 'none'
              }"></view>
  
          </view>
          <CardBoxPointLayout top="51.7%" left="60.5%" :gutterX="30" :column="true" >
            <template #default="{ gutterX }">
              <!-- 滑油温度 -->
              <CardBoxPoint
                :judg-ment="true"
                :color-id="
                  rightOrLeftdata(allData?.left_main?.z129?.state, allData?.right_main?.z229?.state)
                "
                :position="false"
                :gutterX="gutterX"
                :width="10"
                :height="10"></CardBoxPoint>
              <!-- 滑油压力 -->
              <CardBoxPoint
                :judg-ment="true"
                :color-id="
                  rightOrLeftdata(allData?.left_main?.z130?.state, allData?.right_main?.z230?.state)
                "
                :position="false"
                :gutterX="gutterX"
                :width="10"
                :height="10"></CardBoxPoint>
              <!-- 冷却水温度 -->
              <CardBoxPoint
                :judg-ment="true"
                :color-id="
                  rightOrLeftdata(allData?.left_main?.z134?.state, allData?.right_main?.z234?.state)
                "
                :position="false"
                :gutterX="gutterX"
                :width="10"
                :height="10"></CardBoxPoint>
              <!-- 冷却水压力 -->
              <CardBoxPoint
                :judg-ment="true"
                :color-id="
                  rightOrLeftdata(allData?.left_main?.z121?.state, allData?.right_main?.z221?.state)
                "
                :position="false"
                :gutterX="gutterX"
                :width="10"
                :height="10"></CardBoxPoint>
            </template>
          </CardBoxPointLayout>
        </view>
      </view>
    
  </view>
 </view>
</template>

<script setup>
import { color as colors } from '@/mixins/globalParam.js';
import { isEmptyToCharacter } from '@/plugins/index.js';
import Gauge from '@/components/echats/gauge2.vue';
import CardBoxPoint from '@/components/point.vue';
import CardBoxPointLayout from '@/components/pointlayout.vue';
import { HEXtoDECSymbols } from '@/utils/utils.js';
import { useI18n } from 'vue-i18n'; // 导入 useI18n
import {
    ref,
    reactive,
    onMounted,
    onUnmounted,
    watch,
    markRaw,
    inject,
    computed // 确保你导入了 computed
} from 'vue';

import { onLoad } from '@dcloudio/uni-app';
let allData = inject('allData');
const { t } = useI18n(); // 使用 useI18n 获取 t 方法
let id = ref(0)

onLoad((options) => {
 id.value = options.props
	});
// 将 HEXtoDEC 定义为函数，而不是计算属性
const HEXtoDEC = (hexValue) => {
    return HEXtoDECSymbols(hexValue);
};

let rightOrLeftdata = computed(() => {
    return (leftVal, rightVal) => {
        return id.value == 0 ? leftVal : rightVal;
    };
	
});

// 开机状态
const hostRunningStatus = computed(() => {
    return (str) => {
        let zc =
            id.value == 1 ? allData.left_main?.z131?.currentValue : allData.right_main?.z231?.currentValue;
        let dc =
            id.value == 1 ? allData.left_main?.z132?.currentValue : allData.right_main?.z232?.currentValue;
        let point = 10;
        let zcValue = zc ?? 0;
        let dcValue = dc ?? 0;
        if (zcValue < point && zcValue < point) return 0;
        if (!str) {
            // 倒车
            if (dcValue >= point) return 2;
            else return 0;
        } else {
            // 正车
            if (zcValue >= point) return 3;
            else return 0;
        }
    };
});
</script>
<style scoped lang="scss">



.round {
    position: absolute;
    left: 33%;
    top: 65%;
    height: 18%;
    width: 7.8%;
}


.warning {
  background-color: rgb(214, 58, 58) !important;
}

.stoping {
  background: gray !important;
}

.running {
  background-color: green !important;
}

.round view {
  background: rgba(192, 192, 192, 1);
}

// rgb(214, 58, 58)
.circle {
    width: 80%; 
    height: 80%; 
    z-index: 999;
    text-align: center;
    top: 10%; 
    left: 10%; 
    position: absolute;
}

.circle_bottom {
  background: rgba(58, 150, 225, 0.4);
  width: 120rpx; // 3.75rem * 32rpx/rem = 120rpx
  height: 100rpx; // 3.125rem * 32rpx/rem = 100rpx
  filter: alpha(opacity=40);
  position: absolute;
  top: 38rpx; // 1.1875rem * 32rpx/rem = 38rpx
  left: 30rpx; // 0.9375rem * 32rpx/rem = 30rpx
  display: none;
}

.circle_bottom2 {
  background: rgba(58, 150, 225, 0.2);
  // border-radius:100%;
  width: 138rpx; // 4.3125rem * 32rpx/rem = 138rpx
  height: 114rpx; // 3.5625rem * 32rpx/rem = 114rpx
  filter: alpha(opacity=20);
  // z-index:-110;
  position: relative;
  display: none;
}

.animation {
  -webkit-animation: twinkling 1s infinite ease-in-out;
  animation: twinkling 1s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animation2 {
  -webkit-animation: twinkling 1s infinite ease-in-out;
  animation: twinkling 1s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes twinkling {
  0% {
    opacity: 0.2;
    filter: alpha(opacity=20);
    -webkit-transform: scale(1);
  }
  50% {
    opacity: 0.5;
    filter: alpha(opacity=50);
    -webkit-transform: scale(1.12);
  }
  100% {
    opacity: 0.2;
    filter: alpha(opacity=20);
    -webkit-transform: scale(1);
  }
}

// <view class="round">
//         <view class="circle"><a>消费进阶</a></view>
//         <view class="circle_bottom animation "></view>
//         <view class="circle_bottom2 animation2 "></view>
//     </view>

// 动画
.clPcolor {
  width: 100rpx; // 3.125rem * 32rpx/rem = 100rpx
  height: 100rpx; // 3.125rem * 32rpx/rem = 100rpx
  background-color: green;
  animation: clP 0.5s infinite;
}

@keyframes clP {
  from {
    opacity: 1;
  }
  to {
    // background-color: transparent;
    opacity: 0.1;
  }
}

.paused {
  animation-play-state: paused !important;
}
.propeller-mask {
  // height: 163.625rpx; // 374 / 0.8 * 0.35 = 163.625
  // width: 28.875rpx; // 66 / 0.8 * 0.35 = 28.875
  left: 0%;
  top: 54%;
  background-color: #2d4961;
  position: absolute;
}

.propeller {
    position: relative;

    // animation: propellerAnimation duration timing-function delay iteration-count direction fill-mode;
    .paddle-left,
    .paddle-right {
      height: 78.75rpx; // 180 / 0.8 * 0.35 = 78.75
      width: 29.75rpx; // 68 / 0.8 * 0.35 = 29.75
      border-radius: 29.75rpx / 78.75rpx;
      background-color: #dcbe1e;
      // transform: rotateX(0deg);
      animation: propellerAnimation infinite 5s;
      animation-timing-function: linear;
    }
    .paddle-left {
      transform-origin: bottom center;
    }
    .paddle-right {
      transform-origin: top center;
    }
    .paddle-shaft {
      position: absolute;
      // z-index: -1;
      top: 50%;
      transform: translateY(-50%);
      height: 35rpx; // 80 / 0.8 * 0.35 = 35
      width: 31.5rpx; // 72 / 0.8 * 0.35 = 31.5
      border-bottom-left-radius: 23.625rpx; // 54 / 0.8 * 0.35 = 23.625
      border-top-left-radius: 23.625rpx; // 54 / 0.8 * 0.35 = 23.625
      background-color: rgb(165 41 0);
    }
  }

@keyframes propellerAnimation {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}

.main {
  display: flex;
  flex-direction: column;
  height: 75%;
  .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
     height: 20%;
    view {
      display: flex;
      align-items: center;
      padding: 10rpx 0; // 0.3125rem * 32rpx/rem = 10rpx
    }
  }
}

.info-container{
  width: 100%;
}

// 烟雾动画
.chimney {
  width: 200rpx; // 6.25rem * 32rpx/rem = 200rpx
  height: 180rpx; // 5.625rem * 32rpx/rem = 180rpx
  // background-color: #888;
  position: relative;
}

.smoke {
  position: absolute;
  bottom: 100%;
  left: 50%; /* 调整烟雾位置 */
  width: 60rpx; // 1.875rem * 32rpx/rem = 60rpx
  height: 30rpx; // 0.9375rem * 32rpx/rem = 30rpx
  border-radius: 20rpx; // 0.625rem * 32rpx/rem = 20rpx
  background-color: #cbcbcb;
  transform: translateX(-50%);
  animation: smokeAnimation 5s infinite;
}

.smoke.big {
  bottom: 140%;
  left: 50%; /* 调整烟雾位置 */
  width: 100rpx; // 3.125rem * 32rpx/rem = 100rpx
  height: 40rpx; // 1.25rem * 32rpx/rem = 40rpx
  border-radius: 20rpx;
  animation: smokeAnimationBig 5s infinite;
  // left: 75%; /* 调整另一个烟雾位置 */
}

.chimney-mask {
  width: 166rpx; // 5.1875rem * 32rpx/rem = 166rpx
  height: 74rpx; // 2.3125rem * 32rpx/rem = 74rpx
  position: absolute;
  top: 0%;
  left: 61%;
  background-color: #2d4961;
}

.chimney-box {
  position: absolute;
  top: 2%;
  left: 60%;
}



@keyframes smokeAnimation {
  0% {
    bottom: 30%;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    bottom: 100%;
    opacity: 0;
  }
}

@keyframes smokeAnimationBig {
  0% {
    bottom: -10%;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    bottom: 90%;
    opacity: 0;
  }
}

.enginebj {
  width: 100%;
  height: 100%;
  position: relative;
  overflow-x: auto; 
  box-sizing: border-box;
  display: flex;

  align-items: center;
}

.wrap {
  width: 370px; 
  height: 180px;
  border-color: #000;
  background: url(/assets/images/hostEngineMain.png) no-repeat;
  background-position: right bottom;
  background-size: 100% 100%;


  flex-shrink: 0; /* 新增：阻止子组件缩小 */
}

.wrap-box {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

.gauge-container {
  display: flex;
  width: 100%; /* 总体宽度占满屏幕 */
  justify-content: space-between; /* 子元素之间均匀分布 */
  align-items: center; /* 垂直居中对齐 */

}

.gauge-container Gauge {
  flex: 1; /* 每个 Gauge 组件平均分配宽度 */
  margin: 0 10rpx; /* 可以根据需要调整组件之间的间距 */
}

.propeller-box {
    position: absolute;
    left: 0%;
    top: 54%;
    z-index: 999;
}
</style>